<template>
  <el-container class="questionlist">
    <el-header class="question-list-header">
      <div class="icon-text text-title margin-bottom0">
        <el-icon class="text-primary">
          <List />
        </el-icon>
        <b class="">题目列表</b>
      </div>
    </el-header>
    <el-main class="question-list-main">
      <!-- <el-scrollbar> -->
      <el-table class="question-list-table" :data="questions" style="width: 100%" @row-click="rowClick"
        :row-class-name="rowClassName">
        <el-table-column prop="ID" label="题号" width="" />
        <el-table-column v-if="CFID" prop="CFID" label="CF题号" width="">
          <template #default="{ row }">
            <span> {{ row.dataformid }}{{ row.codetype }} </span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="题目名" show-overflow-tooltip width="" />
        <el-table-column prop="type" label="题型">
          <template #default="{ row }">
            <div class="felx-between">
              <span>{{ row.type }}</span>
              <!-- class="arrow-box" -->
              <span>
                <el-icon>
                  <Promotion />
                </el-icon>
                <!-- <el-icon>
                  <ArrowRight />
                </el-icon> -->
              </span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- </el-scrollbar> -->
    </el-main>
    <el-footer class="question-list-footer">
      <el-pagination class="pager" size="default" :page-size="limit" :total="getquestioncount" @current-change="change"
        layout="total,prev, pager, next, jumper" :current-page="Math.floor(offset / limit) + 1"></el-pagination>
    </el-footer>
  </el-container>
</template>

<script setup lang="ts">
import { ElPagination } from 'element-plus';
import { ref } from "vue";
import { useRoute, useRouter } from 'vue-router';
import Studycodemodel from '../../../mysql_interface/studycodemodel';
type P = {
  questions?: Studycodemodel.Iquestion[],
  questionbankid?: number | string
  limit?: number
  offset?: number
  order?: keyof Studycodemodel.Iquestion
  change?: (val: number) => void
  getquestioncount?: number
  ID: number | string
  // 
  CFID?: boolean
}

const p = withDefaults(defineProps<P>(), {
  // questions: [],
  limit: 20,
  offset: 0,
  order: 'ID',
  change: () => { },
  getquestioncount: 0,
  // 
  CFID: false
})

const router = useRouter()
const route = useRoute()

const emits = defineEmits(['update:listshow'])
// 表格点击跳转
const selectedRow = ref<Studycodemodel.Iquestion>();
function rowClick(row: any, column: any, event: Event) {
  selectedRow.value = row
  const to = {
    params: { ID: row.ID },
    query: route.query,
  }
  router.push(to)
  // 点击后隐藏列表
  emits('update:listshow', false)
}
// const queryID = computed(() => {
//   console.log("route.params.ID=>", route.params)
//   return route.params.ID
// })
function rowClassName({ row, rowIndex }: { row: Studycodemodel.Iquestion, rowIndex: number }): string {
  // row.rowIndex = rowIndex
  let className = 'cursor-pointer'
  if (selectedRow.value == row || row.ID == p.ID) {
    className = 'highlight-row cursor-pointer';
  }
  return className;
};
</script>

<style scoped>
.questionlist {
  /* height: 100vh; */

  --questionlist-header-height: 45px;
  --questionlist-footer-height: 60px;
}

.question-list-header {
  padding: 0 10px;
  /* margin-top: var(--container-margin); */
}

.text-title {
  display: inline-block;
  vertical-align: middle;
  height: var(--questionlist-header-height);
}

.question-list-main {
  padding: 0
}

.question-list-table {
  /* header nav height:64px */
  height: calc(100vh - 64px - var(--questionlist-footer-height) - var(--questionlist-header-height));
  padding-top: 0;
  padding-bottom: 0;
}

.felx-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: var(--container-margin);
}

.arrow-box {
  width: 16px;
  height: 16px;
  line-height: 16px;
  font-size: 12px;
  text-align: center;
  color: var(--sass-color-blue);
  border: var(--sass-color-blue) 1px solid;
  border-radius: 50%;
}

.question-list-footer {
  padding-top: 5px;
  height: var(--questionlist-footer-height);
  display: flex;
  justify-content: flex-end;
}

.pager {}

.list-group-item {
  border: none;
  cursor: pointer;
  color: #32325d;
}

.router-link-active {
  background-color: var(--color-cheng);
  color: #fff;
}

.list-group-item:hover {
  background-color: var(--color-cheng);
  color: #fff;
}
</style>
<style>
/* !!! */
#question .el-drawer.ltr {
  top: 64px;
  /* header nav height:64px */
  height: calc(100vh - 64px);
}
</style>